<template>
  <div class="order">
    <!-- 内容组件 -->
    <content-template :formData="formData"
                      :searchData="searchData"
                      :tableData="tableData"
                      :getDatas ="getDatas"
                      @handleSubmit="handleSubmit">
          <!-- <div slot="content" style="margin-bottom:20px">
            <Row class-name="home-page-row" :gutter="10">
              <Col :xs="24" :md="12" :sm="24" :lg="6" :style="{marginBottom: '10px'}" v-for="(item,index) in dataList" :key="index">
                <Card class="card">
                  <p slot="title">
                      {{item.title}}
                  </p>
                  <span style="color:#3399ff" slot="extra" >{{item.tag}}</span>
                  <div class="count">                   
                      <countTo class="num" :startVal='0' :endVal='item.count' :duration='3000'></countTo>
                  </div>
                </Card>
              </Col>
            </Row>
          </div> -->
    </content-template>
    <!-- 弹框组件 -->
    <dialog-template
            :options = "formData.options.hasAdd">
            <!-- 表单组件 -->
        <form-template
            :formData="formData"
            :options="formData.options.hasAdd"
            :formValidate="formData.formValidate"
            :rules="formData.ruleValidate"
            :list="formData.list"
            @handleSubmit="handleSubmit"
        >             
        </form-template>
    </dialog-template>
  </div>
</template>
<script>
import countTo from 'vue-count-to';
export default {
   data() {
    return {
      dataList:[
        {
          tag:'条',
          count:3000,
          title:'订单总数'
        }, 
        {
          tag:'元',
          count:3000,
          title:'订单金额'
        }, 
        {
          tag:'元',
          count:3000,
          title:'退款金额'
        }, 
        {
          tag:'元',
          count:3000,
          title:'分佣金额'
        }, 
      ],
      formData:{
        index:'',
        options:{
          hasAdd:{  //需不需要新增按钮——为空时不显示
           
          },
          hasSelect:{
            selectList:[
               {
                 status:'',
                 selectData:[
                    {
                      value: '全部',
                      label: '全部',
                      id:""
                    },
                    {
                      value: '待付款',
                      label: '待付款',
                      id:1
                    },
                    {
                      value: '待发货',
                      label: '待发货',
                      id:2
                    },
                    {
                      value: '待收货',
                      label: '待收货',
                      id:3
                    },
                    {
                      value: '售后',
                      label: '售后',
                      id:4
                    },
                    {
                      value: '交易成功',
                      label: '交易成功',
                      id:5
                    },
                    {
                      value: '交易关闭',
                      label: '交易关闭',
                      id:6
                    },
                 ]
               },
            ]
          }       
        },
      },
      searchData:{  
        searchValue: {  //搜索值
          order_identifier: '',
          goods_name:''
        },
        searchColumns: [ //搜索条件和搜索数量——不传则没有
          {
            key: 'order_identifier',
            label: "订单号",
          },
          {
            key: 'goods_name',
            label: "商品名称",
          },
        ]
      },
      tableData:{  //表格数据及操作
        columns: [
          {
            title: '订单编号',
            key: 'order_identifier',
            width:200,
            align: 'center',
            render: (h, params) => {
              return h('div',{
                  style: {
                      fontSize: '12px',
                      fontWeight: 'bold',
                  }
              },params.row.order_identifier);
            }
          },
          {
            title: '下单用户',
            key: 'manager_name',
            width:270,
            align: 'center',
            render: (h, params) => {
              if ( params.row.customer_wechat != null) {
                return h('div', {
                    style: {
                      padding:'10px',
                      display:'flex',
                      alignItems: 'center',
                    },
                  },[
                  params.row.customer_wechat.avatar_url?
                  h('img', {
                    style: {
                      width: '50px',
                      height: '50px',
                      display: 'inline-block',
                      marginRight: '15px',
                      marginLeft: '20px',
                      borderRadius: '50%',
                      cursor: 'pointer'
                    },
                    attrs: {
                      src: params.row.customer_wechat.avatar_url
                    }
                  }):'',
                  h('span',{
                    style: {
                      fontSize: '14px',
                      textOverflow: 'ellipsis',
                      display: '-webkit-box',
                      WebkitLineClamp: '1',
                      WebkitBoxOrient: 'vertical'
                    },
                  },params.row.customer_wechat.nickname)
                ])
              }else{
                return h('div', {
                  style: {
                    width: '95px',
                    height: '32px'
                  }
                })
              }
            },
          },
          {
              title: '商品信息',
              align: 'center',
              width:300,
              render: (h, params) => {
                var arr = params.row.order_goods;//数据数组
                var newArr = [];
                arr.forEach((a,index)=>{
                    newArr.push(
                        h('div',{
                            style: {
                              padding:'10px',
                              display:'flex',
                              alignItems: 'center',
                            }
                          },[
                            h('img', {
                              style: {
                                width: '80px',
                                height: '80px'
                              },
                              attrs: {
                                src: this.$webUrl + a.goods_image
                              }
                            }),
                            h('div',{
                                style: {
                                  paddingLeft:'10px',
                                  textAlign: 'left',
                                  lineHeight:'20px'
                                }
                              },[
                                h('h5', {
                                  style: {
                                    fontSize: '14px',
                                    textOverflow: 'ellipsis',
                                    display: '-webkit-box',
                                    WebkitLineClamp: '2',
                                    WebkitBoxOrient: 'vertical'
                                  },
                                },a.goods_name),
                                h('p', {
                                  style: {
                                    fontSize: '13px',
                                    fontWeight: 'bold',
                                    color:'red',
                                  },
                                },'￥' + a.sku_price),
                                h('p', {
                                  style: {
                                    fontSize: '12px',
                                    fontWeight: 'bold',
                                    color:'#666',
                                  },
                                },'规格：[' + a.sku.toString() + ']'),
                                h('p', {
                                  style: {
                                    fontSize: '12px',
                                    fontWeight: 'bold',
                                    color:'#666',
                                  },
                                },'商品数量：' + a.goods_num  + '件'),
                            ])
                        ])
                    )
               })
               return h('div',newArr);
               return
              }
            },
          {
            title: '下单时间',
            key: 'create_time',
            align: 'center',
          },
          {
            title: ' 订单状态',
            align: 'center',
            render: (h, params) => {
            return h(
              'div',
              params.row.status == 1 
                ? '待付款'
                : params.row.status == 2
                ? '待发货'
                : params.row.status == 3
                ? '待收货'
                : params.row.status == 4
                ? '售后'
                : params.row.status == 5
                ? '交易成功'
                : params.row.status == 6
                ? '交易关闭'
                : '未知'
            )}
          },
          {
            title: '操作',
            key: 'action',
            fixed: 'right',
            width: 200,
            align: 'center',
            render: (h, params) => {
              let status = params.row.status
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.edit(params.index)
                    }
                  }
                }, '订单详情'),
              ]);
            }
          }
        ],
        data: [], //表格数据
        total:0,  //表格数据总量
        page:1,   //表格数据页码
        per_page:10,  //表格一页显示几条数据
        loading: true, //表格数据预加载
      }
    }
  },
  created(){

  },
  mounted() {
    this.getDatas();
  },
  methods: {
    getDatas(){
      let params = {
        page:this.tableData.page,
        per_page:this.tableData.per_page,
        order_identifier:this.searchData.searchValue.order_identifier,
        goods_name:this.searchData.searchValue.goods_name,
        status:this.formData.options.hasSelect.selectList[0].status,
      }
      this.$api.getOrder(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.tableData.data = res.data.data
              this.tableData.total = res.data.total
              this.tableData.loading = false
          }
      })
    },
    changeStatus(index){
      let status = "";
      let text = "";
      switch( this.tableData.data[index].status){
        case 1:
          text = "隐藏"
          status = 2
          break;
        case 2:
          text = "显示"
          status = 1
          break;
        default:
          console.log('其他')
      };
      let params = {
        poster_id: this.tableData.data[index].poster_id,
        status: status
      }
      this.$api.statusposter(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.$Message.success( text + '成功');
              this.getDatas();
            }
      })
    },
  },
  components: {
     countTo
  }
}
</script>
<style lang="less" scoped>
    @import './index.less';
</style>
